<template>
  <div id="sectorEchart" style="height: 38vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "sectorEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: [
            [
              "product",
              "11月1日",
              "11月2日",
              "11月3日",
              "11月4日",
              "11月5日",
              "11月6日"
            ],
            ["卫生情况", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["防疫情况", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["添加剂使用量", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["原材料", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ["加工情况", 54.2, 56.1, 77.2, 58, 75.9, 33]
          ]
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self"
            },
            label: {
              formatter: "{b}: {@11月1日} ({d}%)"
            },
            encode: {
              itemName: "product",
              value: "11月1日",
              tooltip: "11月1日"
            }
          }
        ]
      };
      // this.chart.on('updateAxisPointer', function (event) {
      //   const xAxisInfo = event.axesInfo[0];
      //   if (xAxisInfo) {
      //     const dimension = xAxisInfo.value + 1;
      //     this.chart.setOption({
      //       series: {
      //         id: 'pie',
      //         label: {
      //           formatter: '{b}: {@[' + dimension + ']} ({d}%)'
      //         },
      //         encode: {
      //           value: dimension,
      //           tooltip: dimension
      //         }
      //       }
      //     });
      //   }
      // });
    },
    initCharts() {
      let that = this;
      that.chart = echarts.init(document.getElementById("sectorEchart"));
      that.chart.on("updateAxisPointer", function(event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          that.chart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      that.chart.setOption(that.options, true);
    }
  }
};
</script>
